<div style="display: flex; align-items: center; gap: 16px;">
  <!-- Original Material repo link -->
  {% if config.repo_url %}
    <a href="{{ config.repo_url }}" title="{{ config.repo_name }}" class="md-source" data-md-component="source">
      <div class="md-source__icon md-icon">
        {% set icon = config.theme.icon.repo or "fontawesome/brands/git-alt" %}
        {% include ".icons/" ~ icon ~ ".svg" %}
      </div>
      <div class="md-source__repository">
        {{ config.repo_name }}
      </div>
    </a>
  {% endif %}
  <!-- custom star button matching search bar style -->
  <a href="https://github.com/k8gb-io/k8gb" target="_blank" rel="noopener" style="display: inline-flex; align-items: center; gap: 4px; padding: 0.5rem 1rem; background: rgba(0, 0, 0, 0.26); border-radius: 0.1rem; color: white; text-decoration: none; font-size: 0.8rem; font-weight: 400; white-space: nowrap; min-height: 1.8rem;">
    <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
      <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
    </svg>
    <span>Star project</span>
  </a>
</div>
